今日目標

• 了解 Angular 的 插值 (Interpolation) 和 結構指令 ngFor
• 在元件的 .ts 檔裡定義 skills 與 projects 陣列
• 用 ngFor 在 .html 裡自動產生清單
• 學會把資料跟樣板分開，讓維護更簡單

基礎概念：什麼是 Data Binding？

在純 HTML 裡，你要顯示一段文字，就只能直接寫死：

<p>哈囉，我是 Chiayu</p>

但在 Angular 裡，我們可以這樣做：

<p>{{ name }}</p>

然後在 .ts 檔裡宣告：

name = 'Chiayu';

👉 Angular 會自動把 name 的值顯示在畫面上。

這種 {{ }} 的語法就叫 插值 (Interpolation)。

基礎概念：*ngFor

如果我們有一個清單：

skills = ['HTML', 'CSS', 'TypeScript'];

在 .html 裡，我們可以用 *ngFor 迴圈：

<ul>
  <li *ngFor="let skill of skills">{{ skill }}</li>
</ul>

👉 Angular 會自動幫我們把陣列每一項都渲染成 <li>。

實作：把 Skills / Projects 資料化

1. 修改 skills.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-skills',
  templateUrl: './skills.component.html',
  styleUrls: ['./skills.component.scss']
})
export class SkillsComponent {
  skills = [
    { name: 'HTML / CSS / SCSS', category: 'frontend' },
    { name: 'TypeScript', category: 'frontend' },
    { name: 'Angular / React / Vue', category: 'frontend' },
    { name: 'Node.js / Express', category: 'backend' },
    { name: 'Git / GitHub / Docker', category: 'tools' },
    { name: 'Vite / Webpack', category: 'tools' }
  ];
}

2. 修改 skills.component.html

<section id="skills" class="container section">
  <h2>技能 Skillset</h2>
  <ul class="skill-grid">
    <li *ngFor="let skill of skills">
      {{ skill.name }}
    </li>
  </ul>
</section>

👉 現在如果要新增技能，只要在 .ts 裡加一筆資料，畫面會自動更新。

3. 修改 projects.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-projects',
  templateUrl: './projects.component.html',
  styleUrls: ['./projects.component.scss']
})
export class ProjectsComponent {
  projects = [
    {
      title: '毛毛購物（寵物電商）',
      desc: '主導前端架構，完成商品列表、購物流程與訂單頁。',
      tech: 'Angular + Node.js｜購物車、結帳、RWD',
      link: '#'
    },
    {
      title: 'LINE Bot 預約系統',
      desc: '整合 LINE 聊天介面與雲端排程，完成會員預約流程。',
      tech: 'Cloud Functions + LINE API｜時段預約',
      link: '#'
    }
  ];
}

4. 修改 projects.component.html

<section id="projects" class="container section">
  <h2>作品集 Projects</h2>
  <div class="project-grid">
    <article class="card" *ngFor="let project of projects">
      <h3>{{ project.title }}</h3>
      <p class="muted">{{ project.tech }}</p>
      <p>{{ project.desc }}</p>
      <a class="btn small" [href]="project.link" target="_blank">Live Demo</a>
    </article>
  </div>
</section>

👉 這樣「專案卡片」也不需要死寫 HTML 了。

成果

1. Skills 區域的清單是由 TypeScript 陣列渲染出來
2. Projects 區域的卡片同樣由資料驅動
3. 新增、刪除技能或專案 → 只改 .ts 的陣列，不用動 HTML
4. 網站正式變成「資料驅動 UI」

小心踩雷（常見錯誤）

1. 忘了在 .ts 裡加 export class
   • Angular 元件必須 export 才能用
2. 用 = 當成比對，而不是 ngFor
   • ❌ <li *ngFor="let skill = skills">
   • ✅ <li *ngFor="let skill of skills">
3. 不小心改到 index.html
   • 記得資料綁定只會在 component.html 生效
4. 忘記中括號 [href]
   • 如果用字串插值：href="{{ project.link }}"
   • 如果用屬性綁定：[href]="project.link"
   • 兩種都可以，但推薦第二種（Angular 官方建議用法）

下一步（Day 10 預告）

明天，我們要學 Angular 的事件綁定 (Event Binding)：

• 讓按鈕點擊可以觸發方法
• 幫「更多介紹」加上 Angular 事件，而不是用原生 JS
• 幫「技能分類」加上點擊篩選功能（搭配今天的資料綁定）